---
title: useMediaQuery
description: The useMediaQuery hook can be used to access media queries and update functionality in React components.
docType: API Docs
docGroup: Hooks
group: Resizing and Positioning
hooks: [useMediaQuery]
---

# useMediaQuery [$SOURCE](packages/core/src/media-queries/useMediaQuery.ts)

```ts disableTransform
function useMediaQuery(query: string, disabled?: boolean): boolean;
```

The `useMediaQuery` hook can be used to access media queries and update
functionality in React components.

## Example Usage

```tsx
import { useMediaQuery } from "@react-md/core/media-queries/useMediaQuery";

function Example() {
  const matches = useMediaQuery("screen and (min-width: 768px)");

  return <>{matches ? "Matches" : "Doesn't"}</>;
}
```

## Parameters

- `query` - The media query string that is passed to `window,matchMedia`
- `disabled` - Prevent the media query from updating

## Returns

`true` if the media query matches.

## See Also

- [Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [useAppSize](./use-app-size)
- [usePrefersDarkTheme](./use-prefers-dark-theme)
